<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Right</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/resources/favicon.ico">
    <link rel="stylesheet" href="resources/layui/css/layui.css" th:href="@{/resources/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/css/public.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/layui_ext/dtree/dtree.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/layui_ext/dtree/font/dtreefont.css}" media="all"/>
    <style>
        input#search_provideridTree_select_input_id {
            border-radius: 10px;
            height: 30px;
            margin-top: 4px;
        }
        input#provideridTree_select_input_id {
            border-radius: 10px;
            height: 30px;
            margin-top: 4px;
        }
        input#leaderprovideridTree_select_input_id {
            border-radius: 10px;
            height: 30px;
            margin-top: 4px;
        }
        input.layui-input.layui-unselect {
            border-radius: 10px;
            height: 30px;
            margin-top: 4px;
        }
    </style>
</head>
<body>
    <!--查询条件-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
        <legend>查询条件</legend>
    </fieldset>
    <form action="" method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">订单号</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" id="price" class="layui-input input-radius"
                           placeholder="请输入订单号">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name" class="layui-input input-radius"
                           placeholder="请输入手机号">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">商家</label>
                <div class="layui-input-inline">
                    <select name="pid" id="select_shopId">
                        <option value="0">请选择商家</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center;padding-right: 15%;">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doSearch"><i
                        class="layui-icon layui-icon-search layui-icon-normal"></i>查询
                </button>
                <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                        class="layui-icon layui-icon-refresh"></i><span>重置</span>
                </button>
            </div>
        </div>
    </form>

    <!--数据表格-->
    <div>
        <table class="layui-hide" id="orderTable" lay-filter="orderTable"></table>
        <div id="orderRowBar"  style="display: none;">
<!--            <span id="tool"></span>-->
            {{d.finish == 1  ? '':'<button type="button"  lay-event="finish" class="layui-btn layui-btn-sm layui-btn-radius">完成订单</button>'}}
            <button type="button" lay-event="list" class="layui-btn layui-btn-sm layui-btn-radius">
                详情
            </button>
        </div>
    </div>

    <!--详情界面-->

    <div id="menuList" style="display: none;padding: 10px;padding-right: 5%"></div>
    
    <script type="text/javascript" src="/resources/layui/layui.js"></script>
    <script type="text/html" id="finish">
            {{d.finish==1?'<font color="blue">已完成</font>':'<font color="red">未完成</font>'}}
    </script>
    <script type="text/javascript">
        //提升数据表格的作用域，因为底下还有一个reloadTable方法
        var tableIns;
        var dataFinish;
        layui.use(['jquery', 'form','layer', 'table'], function () {
            var $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;
            var mainIndex = 0;
            var index = 0;
            //初始化表格 加载数据
            tableIns = table.render({
                initSort: {
                    field: 'finish' //排序字段，对应 cols 设定的各字段名
                    ,type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                },
                elem: "#orderTable",
                title: "订单数据表格",
                url: "/orderForm/loadOrderForm",
                height: "full-180",
                cols: [ [
                    {field: 'id', title: 'ID', align: 'center', sort: true},
                    {field: 'date', title: '下单时间', align: 'center', sort: true},
                    {field: 'openId', title: '下单设备ID', align: 'center', sort: true},
                    {field: 'shopname', title: '店家', align: 'center', sort: true},
                    {field: 'phone', title: '手机号', align: 'center', sort: true},
                    {field: 'sum', title: '价格', align: 'center'},
                    {field: 'finish', title: '状态' , align: 'center',templet:'#finish'},
                    {fixed: 'right', title: '详情', toolbar: '#orderRowBar', align: 'center'}
                ] ],

                done: function (data, curr, count) {
                    //不是第一页时，如果当前返回的数据为0那么就返回上一页
                    if (data.data.length == 0 && curr != 1) {
                        tableIns.reload({
                            page: {
                                curr: curr - 1
                            }
                        })
                    };
                    //判断menuList是否显示，若显示在主界面，则隐藏
                    if(document.getElementById('menuList')){
                        //删除节点div2
                        var div2 = document.getElementById('menuList');
                        //自己把自己干掉
                        div2.style.display="none";
                    };
                }
            });

            //监控行工具条事件
            table.on("tool(orderTable)", function (obj) {
                //获取当前行数据
                var data = obj.data;
                switch (obj.event) {
                    case 'finish':
                        finish(data);
                        break;
                    case 'list':
                        list(data);
                        break;
                }
            });



            //打开修改的弹出层
            function list(data) {
                mainIndex = layer.open({
                    type:1,
                    content:$("#menuList"),
                    area:['500px','500px'],
                    title:'订单详情',
                    success:function () {

                        //一定要先赋予空，不然会出现undefined
                        var html="";
                        var dom = $("#menuList");
                        var d = data.children;
                        $.each(d,function (index,item) {
                            html +='<div class="layui-input-block" style="margin-left: 70px; margin-top: 10px "><img src="'+item.icon+'" style="width: 60px; height: 60px;"><label>'+item.goodsname+'</label><lable style="float: right;margin-right: 30px;margin-top: 17px" >x'+item.number+'</lable></div>';
                        });
                        dom.html(html);
                    }
                });
            };

            //完成订单事件
            function finish(data) {
                $.post("/orderForm/orderFinish",{orderId:data.id},function (res) {
                    if(res.code == 200){
                        tableIns.reload({
                            where:"",
                        });
                    };
                    layer.msg(res.msg);
                })
            };

        });

    </script>
</body>
</html>